<template>
  <div>
    <div style="width:1px;height:24px;"></div>
    <div class="clearfix" style="width:586px;margin:0 auto;">
      <div class = "title1 left" @click = "$router.push('/')"></div>
      <div class = "title2 left" @click = "$router.push('/')"></div>
      <div class = "title3 left" @click = "$router.push('/')"></div>
    </div>
    <div style="width:1680px;margin: 0 auto;">
    <el-input
      class="input"
      placeholder="通过 区块号/区块hash/交易hash/账户地址 查询"
      prefix-icon="el-icon-search"
      @keyup.enter.native="OnSearch"
      v-model="search_text">
    </el-input>
    </div>
  </div>
</template>

<script>
/* eslint-disable */

import axios from 'axios'
import qs from 'qs'
export default {
  name: 'Title',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      search_text:"",
    }
  },
  components:{

  }, mounted: function () {
   
  }, methods: {
    OnSearch(){
        this.search_text = this.search_text.replace(/(^\s*)|(\s*$)/g, "");
        var hash_exp = /^0x[0-9a-f]{64}$/;
        var num_exp = /^[0-9]+$/
        if(num_exp.test(this.search_text)){
          this.$router.push({path:'/blocks/'+this.search_text});
        }
        else if(hash_exp.test(this.search_text)){
          var self = this
          axios.get('/api/get_block_info_by_hash/'+this.search_text).then(function(data){
            var json_obj = data.data
            self.$router.push({path:'/blocks/'+self.search_text});
          }).catch(function(e){
            var json_obj = data.data
            self.$router.push({path:'/exterinsics/'+self.search_text});
          })
        } else{
          this.$router.push({path:'/address/'+this.search_text});
        }
    }
  }
}
</script>
<style lang="scss" >
@import "../style/self.scss"; 
    .title1 {
        width:284px;
        height:84px;
        margin: 0 auto;
        background-image: url(/static/logo.png);
        background-size:284px 84px;
        background-repeat:no-repeat;
    }
    .title2 {
        width:16px;
        height:16px;
        margin: 0px 12px;
        margin-top:32px;
        background-image: url(/static/x.png);
        background-size:16px 16px;
        background-repeat:no-repeat;
    }
    .title3 {
        width:262px;
        height:62px;
        margin: 0 auto;
        margin-top:11px;
        background-image: url(/static/logo2.png);
        background-size:262px 62px;
        background-repeat:no-repeat;
    }
    .title_txt{
        width:1152px;
        margin: 0 auto;
        text-align: left;
        color:  #eeeeee;
        line-height: 52px;
        font-size:24px;
        justify-content: left;
    }
    .input{
      margin-top:24px;
    }

    .el-input__inner{
      width: 1684px;
      height: 64px;
      background: #262A34;
      color: #ffffff;
      border-radius: 44px;
      border: 0px;
      padding-left: 100px;
    }
    
    .el-input--prefix .el-input__inner{
      padding-left:65px;
    }
    .el-input__prefix{
      color: #4b4e56;
      left:32px;
    }
    .el-input {
        position: relative;
        font-size: 24px;
        display: inline-block;
        width: 100%;
    }
    
    .el-input__inner::placeholder {
        color: #4b4e56;
    }
     /* 谷歌 */
    .el-input__inner::-webkit-input-placeholder {
        color: #4b4e56;
    }
     /* 火狐 */
   .el-input__inner:-moz-placeholder {
        color: #4b4e56;
    }
     /*ie*/
   .el-input__inner:-ms-input-placeholder {
        color: #4b4e56;
    }
    
</style>
